<!-- 张梦莉  2017-12-12 评价管理-->

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model.trim="filters.productName" placeholder="商品名称">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="filters.comment_content" placeholder="评论内容">
                    </el-input>
                </el-form-item>
                <el-form-item label="">
                    <template>
                        <el-select v-model="filters.comment_status" @change="getComments" placeholder="显示状态">
                            <el-option label="显示状态" value=""></el-option>
                            <el-option label="显示" value=1></el-option>
                            <el-option label="屏蔽" value=0></el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" v-on:click="getComments" icon="el-icon-search">搜索</el-button>
                </el-form-item>
                <el-form-item style="float: right;">
                  <el-form-item>
                    <el-button type="success" v-on:click="handleRestFilters" icon="el-icon-refresh">重置</el-button>
                  </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="batchStatus" icon="el-icon-view"
                                   :disabled="this.sels.length===0">屏蔽</el-button>
                    </el-form-item>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="commentList" highlight-current-row v-loading="listLoading"
                  @selection-change="selsChange" style="width: 100%;" :sort-change="order">
            <el-table-column type="selection" width="55px">
            </el-table-column>
            <el-table-column type="index" label="评论编号" width="120px" sortable>
            </el-table-column>
            <el-table-column prop="product.product_name" label="商品名称" width="180px">
            </el-table-column>
            <el-table-column prop="user.user_name" label="评论者" width="120px">
            </el-table-column>
            <el-table-column prop="user_score" label="评分" width="120px">
            </el-table-column>
            <el-table-column prop="comment_content" label="评论内容" min-width="200px">
            </el-table-column>
            <!--<el-table-column prop="comment_status" label="显示状态" :formatter="formatStatus">-->
            <!--</el-table-column>-->
            <el-table-column prop="created_at" label="评论时间" width="200px">
            </el-table-column>
            <el-table-column label="显示状态" width="150px">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.comment_status==1" :disabled="editDisabled" :active-value="true" :inactive-value="false" @change="editStatus(scope.row.comment_id)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="210">
                <template slot-scope="scope">
                    <div class="click-detail" @click="handleEdit(scope.row)" type="primary">查看/回复</div>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="total, sizes, prev, pager ,next" :page-size="filters.pageSize"
                           @current-change="handleCurrentChange" @size-change="handleSizeChange" :total="total">
            </el-pagination>
        </el-col>

        <!--查看界面 start-->
        <el-dialog title="查看/编辑" :visible.sync="editFormVisible" min-width="400" width="40%" :close-on-click-modal="true"
                   :show-close="true">
            <div slot="title" class="dialog-title">查看/回复评论</div>
            <el-form :model="editForm" ref="editForm" label-width="100px" >
                <el-form-item label="评论人：" v-text="">
                    {{editForm.user_name}}
                </el-form-item>
                <el-form-item label="启用状态" prop="comment_status">
                    <el-switch v-model="editForm.comment_status==1" :active-value="true" :inactive-value="false"></el-switch>
                </el-form-item>
                <el-form-item label="评论商品：">
                    {{editForm.product_name}}
                </el-form-item>
                <el-form-item label="评论内容：">
                    {{editForm.comment_content}}
                </el-form-item>
                <el-form-item label="">
                    <el-row :gutter="5">
                        <el-col :span="4" v-for="(img,index) in editForm.commentImage" :key="index">
                            <img @click="imgFormVisible=true;this.img_id=index" :src="img.full_image" style="width: 100%; height: auto;"/>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="回复内容：" prop="replay_content">
                    <el-input v-if="editForm.replay_content === ''" type="textarea" v-model="editForm.replay_content"></el-input>
                    <span v-else>{{editForm.replay_content}}</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button v-if="editForm.replay_content === ''" type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
                <el-button v-else type="primary" @click.native="editFormVisible = false">确定</el-button>
            </div>
        </el-dialog>
        <!--查看界面 end-->
        <!--图片查看-->
        <el-dialog title="" :visible.sync="imgFormVisible" width="26%" :close-on-click-modal="true"
                   :show-close="true">
            <template>
                <el-carousel arrow="hover" :setActiveItem="img_id" height="550px" indicator-position="outside" :autoplay="false">
                    <el-carousel-item v-for="img in commentImages" :key="index">
                        <img :src="img.full_image" style="width: 100%; height: auto;"/>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </el-dialog>
        <!--图片查看 over-->
    </section>
</template>

<script>
  import {getCommentList, editComment, editCommentStatus, getCommentDetail} from '../../api/api';

  export default {
    data () {
      return {
        filters: {
          expand: 'product,user,commentReply',
          comment_content: '',
          comment_status: '',
          productName: '',
          pageSize: 10,
          page: 1
        },
        index: 1,
        commentList: [], // 评论集合
        sels: [], // 列表选中列
        ids: [], // 列表选中项ids
        img_id: null,
        commentImages: [], // 图片集合
        editDisabled: false, // 状态更改禁用
        total: 0,
        listLoading: false,
        editFormVisible: false, // 编辑界面是否显示
        editLoading: false,
        lookFormVisible: false,
        imgFormVisible: false,
        // 编辑界面数据
        editForm: {
          comment_id: '',
          comment_status: null,
          replay_content: '',
          user_name: '',
          product_name: '',
          commentImage: [],
          expand: 'user,product,commentImage'
        }
      }
    },
    computed: {},
    methods: {
      // 重置搜索
      handleRestFilters () {
        this.filters = {
          pageSize: 10,
          expand: 'product,user',
          comment_content: '',
          comment_status: null,
          productName: ''
        };
        this.getComments()
      },
      // 排序方法
      order () {

      },
      formatStatus (row) {
        return row.comment_status === 1 ? '显示' : row.comment_status === 0 ? '屏蔽' : '未知';
      },
      handleCurrentChange (val) {
        this.filters.page = val;
        this.getComments();
      },
      // 条数改变
      handleSizeChange (size) {
        this.filters.pageSize = size;
        this.getComments();
      },
      // 获取服务器列表
      getComments () {
        this.listLoading = true;
        // NProgress.start();
        getCommentList(this.filters).then((res) => {
          this.total = res.totalCount;
          this.commentList = res.data;
          this.listLoading = false;
          // NProgress.done();
        });
      },
      // 显示查看编辑界面
      handleEdit (row) {
        this.editForm = {};
        let param = {
          comment_id: row.comment_id,
          expand: 'user,product,commentImage'
        }
        getCommentDetail(param).then((res) => {
          this.editForm = res.data;
          this.editForm.user_name = res.data.user.user_name;
          this.editForm.product_name = res.data.product.product_name;
          this.editForm.commentImage = res.data.commentImage;
          this.commentImages = res.data.commentImage;
          this.editForm.replay_content = '谢谢您的评价,我们会继续努力';
          this.editFormVisible = true;
        });
      },
      // 更改状态
      editStatus (id) {
        let para = {};
        para.ids = [id];
        this.editDisabled = true
        editCommentStatus(para).then((res) => {
          this.editLoading = false;
          if (parseInt(res.status) === 1) {
            this.$message({
              message: '更改成功',
              type: 'success'
            });
            this.editDisabled = false
          } else {
            this.$alert('更改失败', '失败', {type: 'error'});
            this.editDisabled = false
          }
          this.getComments();
        });
      },
      // 编辑
      editSubmit () {
        if(this.editForm.replay_content === ''){
          this.editForm.replay_content = '谢谢您的评价,我们会继续努力';
        }
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true
              // NProgress.start();
              let para = Object.assign({}, this.editForm)
              editComment(para).then((res) => {
                this.editLoading = false
                // NProgress.done();
                if (res.data !== null) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  })
                } else {
                  this.$alert('编辑失败', '失败', {type: 'error'})
                }
                this.editFormVisible = false
                this.getComments()
              })
            })
          }
        })
      },
      selsChange (sels) {
        this.ids = [];
        this.sels = sels;
        for (let i = 0; i < sels.length; i++) {
          this.ids.push(JSON.stringify(this.sels[i].comment_id));
        }
      },
      // 批量屏蔽
      batchStatus () {
        this.$confirm('确认更改选中状态吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          // NProgress.start();
          let para = {};
          para.ids = this.ids;
          editCommentStatus(para).then((res) => {
            this.listLoading = false;
            // NProgress.done();
            if (parseInt(res.status) === 1) {
              this.$message({
                message: '更改成功',
                type: 'success'
              });
            } else {
              this.$alert('更改失败', '失败', {type: 'error'});
            }
            this.getComments();
          });
        }).catch(() => {
        });
      }
    },
    mounted () {
      this.getComments();
    },
    watch: {}
  }
</script>
<style rel="stylesheet/sass" lang="sass" scoped>
    .click-detail
        color: #409EFF
        cursor: pointer
    .click-detail:hover
        color: #443dff
    .el-table thead tr
        background-color: #e5f0fb !important

</style>
